//定义懒加载插件

import { useIntersectionObserver } from '@vueuse/core' 

export const lazyPlugin ={
    install (app) {
        app.directive('img-lazy' ,{
            mounted(el ,binding){
                //el 代表绑定指令的那个对应的元素 img
                //binding.value 代表指令等于符号后面表达式的值 img.url
                const { stop } = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                      if(isIntersecting){
                        el.src = binding.value
                        stop()
                      }
                    },
                  )
        
            }
        })
    }
}